<template>
  <div>
    <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
     :append-to-body='true' width="800px">
      <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="150px">

        <el-row>
            <el-col :span="12">
          <el-form-item label="用户账户：" prop="username" style="width:90%;" >
            <el-input v-model.trim="ruleForm.username"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="用户密码：" prop="password" style="width:90%;" >
            <el-input v-model.trim="ruleForm.password"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="到期时间：" prop="dqtime" style="width:90%;" >
            <el-date-picker
      v-model="ruleForm.dqtime"
      type="date"
      value-format="YYYY-MM-DD"
      format="YYYY-MM-DD"
      placeholder="选择日期">
    </el-date-picker>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="用户点数：" prop="ds" style="width:90%;" >
            <el-input v-model.trim="ruleForm.ds"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="账户状态：" prop="status" style="width:90%;" >
            <el-select v-model="ruleForm.status" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="账号类型：" prop="type" style="width:90%;" >
            <el-select v-model="ruleForm.type" class="m-2" placeholder="Select" >
              <el-option
                v-for="item in type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="多开数量：" prop="overopennum" style="width:90%;" >
            <el-input v-model.trim="ruleForm.overopennum"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="当前在线：" prop="online" style="width:90%;" >
            <el-input v-model.trim="ruleForm.online"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="所属软件：" prop="sofrwarename" style="width:90%;" >
            <el-input v-model.trim="ruleForm.sofrwarename"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="所属代理：" prop="dl" style="width:90%;" >
            <el-input v-model.trim="ruleForm.dl"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="机器码值：" prop="jqcode" style="width:90%;" >
            <el-input v-model.trim="ruleForm.jqcode"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="游戏号值：" prop="gamecode" style="width:90%;" >
            <el-input v-model.trim="ruleForm.gamecode"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="附加属性：" prop="append" style="width:90%;" >
            <el-input v-model.trim="ruleForm.append"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="自定数据：" prop="will" style="width:90%;" >
            <el-input v-model.trim="ruleForm.will"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="用户备注：" prop="remark" style="width:90%;" >
            <el-input v-model.trim="ruleForm.remark"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="联系方式：" prop="phone" style="width:90%;" >
            <el-input v-model.trim="ruleForm.phone"  /> 
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
          <el-form-item label="IP信息值：" prop="ip" style="width:90%;" >
            <el-input v-model.trim="ruleForm.ip"  />
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="解绑次数：" prop="bindinglimit" style="width:90%;" >
            <el-input v-model.trim="ruleForm.bindinglimit"  /> 
          </el-form-item>
        </el-col>
        </el-row>
      
        <el-form-item>
          <el-button @click="data.children_page = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
// import UploadImg from "./Upload/Img.vue";
  import {
    userData,
  } from '../../../api/index';
  import {
    ElMessage,ElTree,
  } from "element-plus";
  // import type { FormInstance } from 'element-plus' 
  import {
    ref,
    reactive,
    nextTick,
    // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
    // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
    // defineExpose//暴露出去;<script setup>直接可用
  } from 'vue';

// 状态
const status = [
  {
    value: '0',
    label: '正常',
  },
  {
    value: '1',
    label: '锁定',
  },
  {
    value: '2',
    label: '深锁',
  },
];
// 类型
const type = [
  {
    value: '0',
    label: '免费',
  },
  {
    value: '1',
    label: '收费',
  },
];

  const test1 = ref('')
const test2 = ref('')

  const ruleFormRef = ref();//表单ref
  //获取tree选中的值
  const treeRef = ref < InstanceType < typeof ElTree >> ();
  const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)

  //数据双向绑定;复杂类型数据=>响应式数据
  const data = reactive({
    titleName: '',
    checkAll: false,
    children_page: false,
    isAdd: false,
    systems: [{
      name: '开发1部',
      id: 'water'
    }, {
      name: '市场部',
      id: 'pollution'
    }],
    nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
    treeDatas: [], //树-总数据
    id: '',
  });
  //ts类型断言
  //定义类型
  interface User {
		id: string;
		username: string;
		password: string;
		dqtime: string;
		ds: string;
		status: string;
		type: string;
		overopennum: string;
		online: string;
		sofrwarename:string;
		sofrwareid:string;
		jqcode:string;
		gamecode:string;
		append:string;
		well:string;
		remark:string;
		phone:string;
		ip:string;
		bindinglimit:string;
		zctime:string;
		dl:string;
    will:string;
  };
  const ruleForm = reactive({
    id: "",
    username:"",
    password:"",
    dqtime:"",
    ds:"",
    status:"",
    type:"",
    overopennum:"",
    online:"",
    sofrwarename:"",
    sofrwareid:"",
    jqcode:"",
    gamecode:"",
    append:"",
    well:"",
    remark:"",
    phone:"",
    ip:"",
    bindinglimit:"",
    createtime:"",
    zctime:"",
    dl:"",
    will:"",
  });
  const rules = ref({
    username: [{
        required: true,
        message: '请输入角色名称',
        trigger: 'blur'
      },
      {
        min: 1,
        max: 50,
        message: '长度在 1 到 50 个字符',
        trigger: 'blur'
      }
    ],
    
  });
  //父调子的子
  const addItemShow = (now_name: string) => {
    data.titleName = '添加';
    data.children_page = true;
    data.isAdd = true;
    ruleForm.username = '';
      ruleForm.password = '';
      ruleForm.dqtime = '';
      ruleForm.ds = '';
      ruleForm.status = '0';
      ruleForm.type = '0';
      ruleForm.overopennum = '';
      ruleForm.online = '';
      ruleForm.sofrwarename = '';
      ruleForm.sofrwareid = '';
      ruleForm.jqcode = '';
      ruleForm.gamecode = '';
      ruleForm.append = '';
      ruleForm.will = '';
      ruleForm.remark = '';
      ruleForm.phone = '';
      ruleForm.ip = '';
      ruleForm.bindinglimit = '';
      ruleForm.zctime = '';
      ruleForm.dl = '';
console.log(ruleForm);

    nextTick(() => {
    ruleFormRef.value.resetFields();//重置表单
    })
  };
  //父调子的子
  const addItemShow2 = (row: User, now_name: string) => {
    data.titleName = '编辑';
    data.children_page = true;
    data.isAdd = false;
    nextTick(() => {
      ruleFormRef.value.resetFields();//重置表单
      ruleForm.username = row.username;
      ruleForm.password = row.password;
      ruleForm.dqtime = row.dqtime;
      ruleForm.ds = row.ds;
      ruleForm.status = row.status;
      ruleForm.type = row.type;
      ruleForm.overopennum = row.overopennum;
      ruleForm.online = row.online;
      ruleForm.sofrwarename = row.sofrwarename;
      ruleForm.sofrwareid = row.sofrwareid;
      ruleForm.jqcode = row.jqcode;
      ruleForm.gamecode = row.gamecode;
      ruleForm.append = row.append;
      ruleForm.will = row.will;
      ruleForm.remark = row.remark;
      ruleForm.phone = row.phone;
      ruleForm.ip = row.ip;
      ruleForm.bindinglimit = row.bindinglimit;
      ruleForm.zctime = row.zctime;
      ruleForm.dl = row.dl;
      data.id = row.id;
    })
  };
  //添加/修改   : FormInstance | undefined
  const onSubmit = async (formEl:any) => {
    if (!formEl) return
    formEl.validate((valid:any) => {
      if (valid) {
        if (data.isAdd) { 
          addRoles();
        } else {
          changeRoles();
        }
      } else {
        return false;
      }
    });
  };
// ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
        // 使用ref包裹的数据，需要通过 .value 的形式访问他的值
  const addRoles = () => { 
    let params = {
      action: 'apiadd',
      username: ruleForm.username,
      password: ruleForm.password,
      dqtime: ruleForm.dqtime,
      ds: ruleForm.ds,
      status: ruleForm.status,
      type: ruleForm.type,
      overopennum: ruleForm.overopennum,
      online: ruleForm.online,
      sofrwarename: ruleForm.sofrwarename,
      sofrwareid: ruleForm.sofrwareid,
      jqcode: ruleForm.jqcode,
      gamecode: ruleForm.gamecode,
      will: ruleForm.will,
      remark: ruleForm.remark,
      phone: ruleForm.phone,
      ip: ruleForm.ip,
      bindinglimit: ruleForm.bindinglimit,
      zctime: ruleForm.zctime,
      dl: ruleForm.dl,
    }
    console.log(params);
    
    userData(params).then(res => {
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        data.children_page = false;
        emit("onItemChange");
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
  };
  //修改接口
  const changeRoles = () => {
    let params = {
      action: 'apiedit',
      id: data.id,
      username: ruleForm.username,
      password: ruleForm.password,
      dqtime: ruleForm.dqtime,
      ds: ruleForm.ds,
      status: ruleForm.status,
      type: ruleForm.type,
      overopennum: ruleForm.overopennum,
      sofrwarename: ruleForm.sofrwarename,
      sofrwareid: ruleForm.sofrwareid,
      jqcode: ruleForm.jqcode,
      gamecode: ruleForm.gamecode,
      will: ruleForm.will,
      remark: ruleForm.remark,
      phone: ruleForm.phone,
      ip: ruleForm.ip,
      bindinglimit: ruleForm.bindinglimit,
      zctime: ruleForm.zctime,
      dl: ruleForm.dl,
    }
    
    userData(params).then(res => {
      console.log(res)
      console.log(res.status)
      if (res.status == 200) {
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        data.children_page = false;
        emit("onItemChange");
      } else if (res.status  !== 200) {
        ElMessage.error(res.statusText);
      }
    })
  };
  defineExpose({
    addItemShow,
    addItemShow2
  }) //将子组件方法暴露出来，让父组件调用
</script>
<style scoped>
  .jurisdiction-border {
    width: 500px;
    height: 300px;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: auto;
  }
 
  .jurisdiction-border::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: rgb(241, 241, 241);
    border-radius: 3px;
  }
 
  .jurisdiction-border::-webkit-scrollbar-thumb {
    background-color: rgb(193, 193, 193);
    border-radius: 3px;
  }
 
  /* .tree-name-leave {
    margin-leave: 5px;
  } */
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>